import React, { Component } from 'react'
import {
  Card,
  Button,
  Table,
  Modal,
  message
} from 'antd'
import {formateDate} from '../../utils/dateUtils'
import {PAGE_SIZE} from '../../utils/constant'
import LinkButton from '../../components/link-button'
import {reqUsers, reqDeleteUser, reqAddOrUpdateUser} from '../../api'
import UserForm from './user-form'

const { confirm } = Modal


/**
 * 用户路由
 */
export default class User extends Component {

  state = {
    users: [], // 所有用户列表
    roles: [], // 所有角色的列表
    isShow: false, // 是否显示确认框
  }

  initColumns = () => {
    this.columns = [
      {
        title: '用户名',
        dataIndex: 'username'
      },
      {
        title: '邮箱',
        dataIndex: 'email'
      },
      {
        title: '电话',
        dataIndex: 'phone'
      },
      {
        title: '注册时间',
        dataIndex: 'create_time',
        render: formateDate
      },
      {
        title: '所属角色',
        dataIndex: 'role._id',
        render: (role_id) => this.roleNames[role_id]
      },
      {
        title: '操作',
        render: (user) => (
          <span>
            <LinkButton onClick={()=>this.showUpdate(user)}>修改</LinkButton>
            <LinkButton onClick={()=>this.deteleUser(user)}>删除</LinkButton>
          </span>
        )
      },
    ]
  }
  columns: any[]

  initRoleNames = (roles) => {
    const roleNames = roles.reduce((pre,role) =>{
      pre[role._id] = role.name
      return pre
    },{})
    // 保存
    this.roleNames = roleNames
  }

  /**
   * 添加/修改用户
   */
  addOrUpdateUser = async () => {
    this.setState({
      isShow: false
    })

    const user = this.form.getFieldsValue()
    this.form.resetFields()
    // 如果是更新，需要给user指定_id指定属性
    if(this.user){
      user._id = this.user._id
    }

    const result = await reqAddOrUpdateUser(user)
    if(result.status === 0) {
      message.success(`${this.user ? '修改' : '添加'}用户成功`)
      this.getUsers()
    }
  }

  /**
   * 删除指定用户
   */
   deteleUser = (user) => {
    confirm({
      title: `确定要删除用户${user.username}吗?`,
      onOk: async() => {
        const result = await reqDeleteUser(user._id)
        if(result.status === 0) {
          message.success(`删除用户${user.username}成功！`)
          this.getUsers()
        }
      }
    })
   }

   /**
    * 显示修改页面
    */
   showUpdate = (user) => {
     this.user = user // 保存user
     this.setState({
       isShow: true
     })
   }
   
   // 显示添加页面
   showAdd = () =>{
     this.user = null
     this.setState({
       isShow: true
     })
   }

  getUsers = async () => {
    const result = await reqUsers()
    if(result.status === 0) {
      const {users,roles} = result.data
      this.initRoleNames(roles)
      this.setState({
        users,
        roles
      })
    }
  }
  roleNames: any
  form: any
  user: any

  UNSAFE_componentWillMount() {
    this.initColumns()
  }

  componentDidMount() {
    this.getUsers()
  }

  render() {
    const {users, roles, isShow} = this.state
    const user = this.user || {}
    const title = (
      <Button type='primary' onClick={this.showAdd}>创建用户</Button>
    )
    return (
     <Card title={title}>
       <Table
          bordered
          rowKey= '_id'
          dataSource={users}
          columns={this.columns}
          pagination= {{defaultPageSize: PAGE_SIZE}}
          />
          <Modal
          title={user._id?'修改用户':'添加用户'}
          visible={isShow}
          onOk={this.addOrUpdateUser}
          onCancel={() => {
            this.form.resetFields()
            this.setState({isShow: false})
          }}
        >
          <UserForm 
            setForm = {(form)=>{this.form = form}}
            roles={roles}
            user={user}
          />
        </Modal>
     </Card>
    )
  }
}
